<template>
  <div style="width:100%" 
    @mouseenter="directBtn = true" 
    @mouseleave="directBtn = false">
    <div style="display:flex;justify-content:center">
      <div style="width:1460px;display:flex;align-items: center">
        <div class="sg-direction" style="margin-right:20px">
          <i v-show="directBtn" class="el-icon-arrow-left" @click="prevList"></i>  
        </div> 
        <div style="width:1300px;float:left" 
          @mouseenter="create = true" 
          @mouseleave="create = false">
          <el-carousel 
            indicator-position="outside" 
            :autoplay="false" 
            arrow="never" 
            ref="carousel">
            <el-carousel-item v-for="index in total" :key="index">
              <div class="sg-item" v-for="(item, idx) in data[index - 1]" :key="idx">
                <span v-if="showAdd && item.status && create" :class="item.gtype == 'A' ? 'sg-radius' : ''">
                  <img :src="item.imageUrl" 
                    :class="item.gtype == 'A' ? 'sg-radius' : ''"
                    @click="$router.push({path:'/config/g_create', query:{type:type, gid:'0'}})"/>
                  <div v-show = "item.status" style="position:relative;top:-145px"
                    @click="$router.push({path:'/config/g_create', query:{type:type, gid:'0'}})"> 
                    <i style="font-size:80px;font-weight:900;cursor: pointer;color:#909399" 
                      class="el-icon-plus">
                    </i>
                  </div>
                </span>
                <span v-else-if="!item.status">
                  <img :src="item.imageUrl" 
                    :class="item.gtype == 'A' ? 'sg-radius' : ''"
                    @click="$router.push({path:'/config/g_create', query:{gid:item.gid}})"/>
                  <p>{{item.title}}</p>
                  <span style="font-size:13px;">{{item.create_time | parseTime}}</span>
                  <span class="sg-span" @click="deleteGather(item)">删除</span>
                  <span class="sg-span" @click="shareGather(item.gid)">分享</span>  
                </span>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="sg-direction" style="margin-left:20px">
          <i v-show="directBtn"  class="el-icon-arrow-right" @click="nextList"></i>  
        </div>   
      </div>
    </div>
  </div>
</template>

<script>
import { error } from '@/utils/toast'
import { setGatherService  } from '@/api/music'
import { shareGather } from '@/api/event'
import { parseTime } from '@/utils/time'
import { getUserGatherService } from '@/api/login'
import { mapGetters, mapMutations } from 'vuex'

export default {
  name: "user-gather",
  components: {},  
  props:{
    title:{
      type:String,
      default:'标题',
    },
    showAdd:{
      type:Boolean,
      default:false,
    },
    type:{
      type:String,
      default:'',
    },
    initIndex:{
      type:Number,
      default:0,
    }
  },
  data() {
    return {
      limit:5,    //  一页最多显示5个
      total:0,    //  总共多少页
      data:[],
      directBtn:false,
      create:false,
    }
  },
  filters:{
    parseTime,
  },
  computed: {
    ...mapGetters([
      'user_id',
    ]),
  },
  created() {
    this.getData()
  },
  methods: {
    shareGather,
    ...mapMutations(['setUserInfo']),
    clickEvent(etype, item) {
      this.$emit(etype, item)
    },
    prevList() {
      this.$refs.carousel.prev()
    },
    nextList() {
      this.$refs.carousel.next()
    },
    async getData() {
      let resp = await getUserGatherService({type:this.type})
      if (!resp || 0 !== resp.result) {
        error(resp.message)
        return
      }

      resp.data = resp.data.map(item => {
        item.status = false
        if (item.imgtype == "1") {
          item.imageUrl = "/mpi/gather/image?gid=" + item.gid
        } else {
          item.imageUrl = item.g_image
        }
          
        return {
          ...item
        }
      })
      resp.data.push({title:'', status:true})

      this.total = parseInt(resp.data.length / this.limit)
      if (0 != resp.data.length % this.limit) {
        this.total += 1
      }

      for (let i = 0; i < this.total; i ++) {
        this.data[i] = resp.data.slice(i * this.limit, (i + 1) * this.limit)
      }
    },
    async deleteGather(item) {
      let op = "delete"
      if ("gathers" == this.type || "aritsts" == this.type) {
        op = "truncate"
      }

      const resp = await setGatherService({
        op : op,
        gid: +item.gid})
      if (!resp || 0 !== resp.result) {
        error(resp.message)
        return
      }

      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
 // .el-carousel__item:nth-child(2n) {
  //   background-color: #99a9bf;
  // }
  
  // .el-carousel__item:nth-child(2n+1) {
  //   background-color: #d3dce6;
  // }

  .sg-direction {
    float:left;
    font-size:30px;
    width:60px;
    height:60px;

    i {
      width:100%;
      height:100%;
      line-height:60px;
      cursor:pointer;
      border-radius: 50%; 
      background-color:#d3dce6;
    }
  }

  .sg-item {
    width:200px;
    text-align: center;
    float:left;
    margin: 10px 60px 0px 0px;

    img {
      width:100%;
      height:200px;
      border-radius: 20px;
      box-shadow: 10px 1px 10px #888888;
      background-color:#dddbdb;
      cursor:pointer;
    }

    .sg-radius {
      border-radius: 50%;
    }

    p {
      text-align: center;
      margin:2px 8px 8px 8px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      font-size:15px;
      height:18px;
    }

    .sg-span {
      font-size:13px;
      cursor:pointer;
      color:blue;
      margin:auto 2px;
    }

    .sg-span:hover {
      color:rgb(238, 32, 4);
    }
  }
</style>